<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport"
			content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Demo</title>
		<style>
			div {
				padding: .5em;
				width: 10em;
				height: 10em;
				border: .2em solid #333;
				font-family: Monaco, monospace;
				font-weight: bold;
				background: rgba(100%, 100%, 100%, .85);
			}

			.relative {
				position: relative;
				z-index: 3;
			}

			.absolute {
				position: absolute;
				left: 3em;
				top: 4em;
				z-index: 2;
			}

			.fixed {
				position: fixed;
				left: 6em;
				top: 8em;
				z-index: 1;
			}
		</style>
	</head>
	
	
	<!-- 
	 
	 
	总结
	层叠顺序：
	 
	 更大 z-index > 脱离文档流且靠后出现 > 脱离文档流 > 未脱离文档流 
	
	 -->

	<body>
		<div class="relative">relative</div>
		<div class="absolute">absolute</div>
		<div class="fixed">fixed</div>
		
		
		
	</body>
</html>
